<template>
    <!-- <div class="mainbox"> -->
    <!-- 添加社区 -->
        <div class="AddCommunity">
            <!-- 添加社区表头 -->
            <div class="AddCommunitytitle">
                <p @click="back">
                    <i class="el-icon-arrow-left"></i>
                    <span>业主绑定</span>
                </p>
                <p>
                    <span class="must">*</span>
                    <span>为必填项</span>
                </p>
            </div>
            <!-- 添加社区输入框内容-->
            <div class="AddCommunitycontent">
                <div class="contentheader">
                    <p class="Basicinformation">
                        <span>基础信息</span>
                    </p>
                    <p class="Basicinformation">
                        <span>其他信息</span>
                    </p>
                </div>
                <div class="addmodule">
                    <!-- 基础信息输入框 -->
                    <div class="countentleft">
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                 关联房屋：
                            </p>
                            <el-input
                            placeholder="万达文旅城/1号楼/1单元/2605"
                            v-model="countent"
                            clearable class="countent">
                            </el-input>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                 姓名：
                            </p>
                            <el-input
                            placeholder="请输入姓名"
                            v-model="name"
                            clearable class="countent">
                            </el-input>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">身份证号：</span>
                            </p>
                            <el-input
                                placeholder="请输入身份证号"
                                v-model="IDcard"
                                clearable class="countent">
                            </el-input>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">出生日期：</span>
                            </p>
                            <el-date-picker
                            v-model="DateofBirth"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="选择日期" class="datapicker">
                            </el-date-picker>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">民族：</span>
                            </p>
                             <el-input
                                placeholder="请输入民族"
                                v-model="nation"
                                clearable class="countent">
                            </el-input>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">户口类型：</span>
                            </p>
                            <el-select v-model="Householdregistrationtype" placeholder="户口类型" class="storeid">
                                <el-option
                                v-for="item in Householdregistrationtypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label" >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">婚姻状况：</span>
                            </p>
                            <el-select v-model="maritalstatus" placeholder="婚姻状况" class="storeid">
                                <el-option
                                v-for="item in maritalstatuss"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label" >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">现住地址：</span>
                            </p>
                            <el-input
                                placeholder="请输入现住地址"
                                v-model="Currentresidentialaddress"
                                clearable class="countent">
                            </el-input>
                        </div>
                    </div>
                    <!-- 负责人输入框 -->
                    <div class="countentright">
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                 手机号：
                            </p>
                            <el-input
                            placeholder="请输入手机号"
                            v-model="phonenumber"
                            clearable class="countent">
                            </el-input>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                业主类型：
                            </p>
                            <el-select v-model="ownertype" placeholder="户主" class="storeid">
                                <el-option
                                v-for="item in ownertypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label" >
                                </el-option>
                            </el-select>
                        </div>
                         <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">性别：</span>
                            </p>
                            <div class="choice">
                                <el-radio v-model="sex" label="1">男</el-radio>
                                <el-radio v-model="sex" label="2">女</el-radio>
                            </div>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                 户籍所在地：
                            </p>
                            <el-input
                            placeholder="请输入内容"
                            v-model="Registeredresidence"
                            clearable class="countent">
                            </el-input>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred"></span>
                                <span class="text">政治面貌：</span>
                            </p>
                            <el-select v-model="Politicalaffiliation" placeholder="政治面貌" class="storeid">
                                <el-option
                                v-for="item in Politicalaffiliations"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label" >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">居住类型：</span>
                            </p>
                            <el-select v-model="Residentialtype" placeholder="居住类型" class="storeid">
                                <el-option
                                v-for="item in Residentialtypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label" >
                                </el-option>
                            </el-select>
                        </div>
                        <div class="payloader">
                            <p class="title">
                                <span class="starred">*</span>
                                <span class="text">暂住证号：</span>
                            </p>
                            <el-input
                                placeholder="请输入暂住证号"
                                v-model="TemporaryResidencePermit"
                                clearable class="countent">
                            </el-input>
                        </div>
                    </div>
                </div>
                <!-- 紧急联系人 -->
                <div class="hotpeople">
                    <div class="hotpeopleheader">
                         <p class="Basicinformation">
                            <span>紧急联系人</span>
                        </p>
                    </div>
                    <div class="hotpeoplecontent">
                        <div class="hotpeopleleft">
                            <div class="payloader">
                                <p class="title">
                                    <span class="starred">*</span>
                                     联系人姓名：
                                </p>
                                <el-input
                                placeholder=""
                                v-model="ContactName"
                                clearable class="countent">
                                </el-input>
                            </div>
                            <div class="payloader">
                                <p class="title">
                                    <span class="starred">*</span>
                                    <span class="text">性别：</span>
                                </p>
                                <div class="choice">
                                    <el-radio v-model="radio" label="1">男</el-radio>
                                    <el-radio v-model="radio" label="2">女</el-radio>
                                </div>
                            </div>
                             <div class="payloader">
                                <p class="title">
                                    <span class="starred"></span>
                                     住址：
                                </p>
                                <el-input
                                placeholder=""
                                v-model="Contactaddress"
                                clearable class="countent">
                                </el-input>
                            </div>
                        </div>
                        <div class="hotpeopleright">
                            <div class="payloader">
                                <p class="title">
                                    <span class="starred"></span>
                                    <span class="text">关系：</span>
                                </p>
                                <el-select v-model="Relationship" placeholder="与户主关系" class="storeid">
                                    <el-option
                                    v-for="item in Relationships"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.label" >
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="payloader">
                                <p class="title">
                                    <span class="starred">*</span>
                                     手机号码：
                                </p>
                                <el-input
                                placeholder=""
                                v-model="contactphone"
                                clearable class="countent">
                                </el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 添加社区保存按钮 -->
                <div class="contentfooter">
                    <el-button type="primary" class="savebutton" @click="save"><i class="el-icon-document-checked"></i>保存</el-button>
                    <el-button plain class="reseatebutton" @click="reseate"><i class="el-icon-refresh-left"></i>重置</el-button>
                </div>
            </div>
        <!-- </div> -->
    </div>
</template>

<script>
export default {
    data() {
      return {
        communityName: '',  //社区名称输入框
        imageUrl: '',      //上传社区照片
        textarea: '',        //备注信息多行文本输入框
        countent:'',        //关联房屋
        radio: '1',         
        sex:'1',            //性别
        ownertype:'',       //业主类型
        name:'',            //姓名
        phonenumber:'',     //手机号码
        DateofBirth:'',     //出生日期
        Registeredresidence:'', //户籍所在地
        nation:'',              //民族
        Politicalaffiliation:'',    //政治面貌
        maritalstatus:'',       //婚姻状况
        Residentialtype:'',     //居住类型
        Householdregistrationtype:'',//户口类型
        TemporaryResidencePermit:'',//暂住证号
        Currentresidentialaddress:'',   //现住地址
        ContactName:'',         //紧急联系人姓名
        Relationship:'',        //与户主关系
        contactphone:'',        //紧急联系人电话
        IDcard:''       ,       //身份证号     
        Contactaddress:'',      //联系人住址   

        textarea: '',
        value:'',
        value1:'',
        // 业主类型
        ownertypes:[
            {
                value: '选项1',
                label: '户主'
            },
            {
                value: '选项2',
                label: '家人'
            },
            {
                value: '选项4',
                label: '租户'
            },
            {
                value: '选项3',
                label: '其他'
            },
        ],
        // 政治面貌
        Politicalaffiliations:[
            {
                value: '选项1',
                label: '共青团员'
            },
            {
                value: '选项2',
                label: '中共党员'
            },
            {
                value: '选项3',
                label: '群众'
            },
            {
                value: '选项4',
                label: '其他'
            }
        ],
        // 婚姻状况
        maritalstatuss:[
            {
                value: '选项1',
                label: '已婚'
            },
            {
                value: '选项2',
                label: '未婚'
            },
            {
                value: '选项3',
                label: '其他'
            },
        ],
        // 居住类型
        Residentialtypes:[
            {
                value: '选项1',
                label: '自住'
            },
            {
                value: '选项2',
                label: '商铺'
            },
            {
                value: '选项4',
                label: '长租'
            },
            {
                value: '选项5',
                label: '短租'
            },
            {
                value: '选项3',
                label: '其他'
            }
        ],
        // 户口类型
        Householdregistrationtypes:[
            {
                value: '选项1',
                label: '农村户口'
            },
            {
                value: '选项2',
                label: '城镇户口'
            },
            {
                value: '选项3',
                label: '其他'
            }
        ],
        // 紧急联系人与业主关系
        Relationships: [{
          value: '选项1',
          label: '配偶'
        }, {
          value: '选项2',
          label: '父母'
        }, {
          value: '选项3',
          label: '子女'
        }, {
          value: '选项4',
          label: '朋友'
        }, {
            value: '选项6',
            label: '租户'
        },{
          value: '选项5',
          label: '其他'
        }],
      }
    },
    mounted(){
        
        if(this.$route.query.list){
            this.countent=this.$route.query.data.Belongingcommunity+'/'+this.$route.query.data.Buildingname+'/'+this.$route.query.data.Numberofunits+'单元/'+this.$route.query.data.RoomNo
            this.name=this.$route.query.list.name
            this.sex=this.$route.query.list.sex
            this.radio=this.$route.query.list.radio
            this.ownertype=this.$route.query.list.ownertype
            this.phonenumber=this.$route.query.list.phonenumber
            this.DateofBirth=this.$route.query.list.DateofBirth
            this.Registeredresidence=this.$route.query.list.Registeredresidence
            this.nation=this.$route.query.list.nation
            this.Politicalaffiliation=this.$route.query.list.Politicalaffiliation
            this.maritalstatus=this.$route.query.list.maritalstatus
            this.Residentialtype=this.$route.query.list.Residentialtype
            this.Householdregistrationtype=this.$route.query.list.Householdregistrationtype
            this.TemporaryResidencePermit=this.$route.query.list.TemporaryResidencePermit
            this.Currentresidentialaddress=this.$route.query.list.Currentresidentialaddress
            this.ContactName=this.$route.query.list.ContactName
            this.Relationship=this.$route.query.list.Relationship
            this.contactphone=this.$route.query.list.contactphone
            this.IDcard=this.$route.query.list.IDcard
            this.Contactaddress=this.$route.query.list.Contactaddress
        }else{
            console.log(this.$route.query.data.Housetype,33333333333)
            // 商铺
            // this.countent=this.$route.query.data.Belongingcommunity+'/'+this.$route.query.data.Productarea+'/'+this.$route.query.data.ShopNumber
            // 房屋
            this.countent=this.$route.query.data.Belongingcommunity+'/'+this.$route.query.data.Buildingname+'/'+this.$route.query.data.Numberofunits+'单元/'+this.$route.query.data.RoomNo
        }
        
    },
    methods:{
        // 上传社区照片事件
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 添加社区底部保存 保存重建 重置按钮
        save(){
            // console.log("保存",this.$route.query.data.date)
            if(this.countent=='' || this.name=='' || this.phonenumber=='' || this.DateofBirth=='' || this.nation=='' || this.Registeredresidence=='' || this.Residentialtype=='' || this.Householdregistrationtype=='' || this.TemporaryResidencePermit=='' || this.ContactName=='' || this.contactphone=='' || this.IDcard==''){
                this.$alert('*为必填项，输入内容不能为空', '', {
                    confirmButtonText: '确定',
                });
            }else{
                fetch(`http://127.0.0.1/owneradd?name=${this.name}&IDcard=${this.IDcard}&DateofBirth=${this.DateofBirth}&nation=${this.nation}&Householdregistrationtype=${this.Householdregistrationtype}&maritalstatus=${this.maritalstatus}&Currentresidentialaddress=${this.Currentresidentialaddress}&phonenumber=${this.phonenumber}&ownertype=${this.ownertype}&sex=${this.sex}&Politicalaffiliation=${this.Politicalaffiliation}&Residentialtype=${this.Residentialtype}&TemporaryResidencePermit=${this.TemporaryResidencePermit}&ContactName=${this.ContactName}&radio=${this.radio}&Contactaddress=${this.Contactaddress}&Relationship=${this.Relationship}&contactphone=${this.contactphone}&Registeredresidence=${this.Registeredresidence}`,{
                    method: 'POST', // 指定请求方法
                    headers: {
                        'Content-Type': 'application/json', // 设置请求的Content-Type
                    },
                    body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                }).then(res=>res.json()).then(res1=>{
                    if(res1.state){
                        fetch(`http://127.0.0.1/houseingbingdingowner?id=${res1.data.insertId}&date=${this.$route.query.data.date}`,{
                            method: 'POST', // 指定请求方法
                            headers: {
                                'Content-Type': 'application/json', // 设置请求的Content-Type
                            },
                            body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                        }).then(res=>res.json()).then(res1=>{
                            console.log(res1,2222222222)
                            this.$message({
                                message: '业主绑定成功',
                                type: 'success',
                                center:true
                            });
                            this.$router.go(-1)     //返回上一级
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        ceate(){
            console.log("保存后继续创建")
        },
        reseate(){
            console.log("重置")
            console.log(this.sex==1?'男':'女',this.radio==1?'男':'女')
        },
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
    // 添加社区
    .AddCommunity{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 添加社区标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                cursor: pointer;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 添加社区内容
        .AddCommunitycontent{
            width: 1260px;
            // height: 700px;
            background-color: #fff;
            // 添加标题  头部标题
            .contentheader{
                width: 100%;
                box-sizing: border-box;
                height: 20px;
                padding: 0 50px;
                margin-top: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .Basicinformation{
                    width: 520px;
                    box-sizing: border-box;
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    color: #666666;
                    border-left: 4px solid rgba(0, 121, 254, 1);
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-style: normal;
                    span{
                        margin-left: 5px;
                    }
                }
            }
            // 添加社区   输入框内容
            .addmodule{
                width: 1260px;
                background-color: #fff;
                padding: 0 50px;
                display: flex;
                box-sizing: border-box;
                // align-items: center;
                justify-content: space-between;
                // 基础信息  和  负责人
                .countentleft,.countentright{
                    width: 520px;
                    margin-top: 40px;
                    .payloader{
                        width: 100%;
                        height: 40px;
                        margin-bottom: 25px;
                        display: flex;
                        align-items: center;
                        .title{
                            width: 120px;
                            padding-right: 20px;
                            font-size: 14px;
                            color: #666666;
                            box-sizing: border-box;
                            text-align: right;
                            .starred{
                                color: #FF3B30;
                            }
                        }
                        .countent{
                            width: 400px;
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .datapicker{
                            width: 400px;
                            ::v-deep .el-input__inner:focus {
                                border-color: #C0C4CC !important;
                                outline: 0;
                            }
                        }
                        .storeid,.building{
                            width: 400px;
                                ::v-deep .el-input__inner {
                                    border-color: #C0C4CC !important;
                                }
                        }
                        
                    }
                    
                }
            }
            // 紧急联系人
            .hotpeople{
                width: 100%;
                box-sizing: border-box;
                padding: 0 50px;
                border-bottom: 1px solid rgba(233, 233, 233, 1);
                .hotpeopleheader{
                    height: 20px;
                    line-height: 20px;
                    .Basicinformation{
                        width: 520px;
                        box-sizing: border-box;
                        height: 20px;
                        line-height: 20px;
                        font-size: 14px;
                        color: #666666;
                        border-left: 4px solid rgba(0, 121, 254, 1);
                        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                        font-weight: 700;
                        font-style: normal;
                        span{
                            margin-left: 5px;
                        }
                }
                }
                .hotpeoplecontent{
                    background-color: #fff;
                    display: flex;
                    box-sizing: border-box;
                    // align-items: center;
                    justify-content: space-between;
                    // 基础信息  和  负责人
                    .hotpeopleleft,.hotpeopleright{
                        width: 520px;
                        margin-top: 40px;
                        .payloader{
                            width: 100%;
                            height: 40px;
                            margin-bottom: 25px;
                            display: flex;
                            align-items: center;
                            .title{
                                width: 120px;
                                padding-right: 20px;
                                font-size: 14px;
                                color: #666666;
                                box-sizing: border-box;
                                text-align: right;
                                .starred{
                                    color: #FF3B30;
                                }
                            }
                            .countent{
                                width: 400px;
                                ::v-deep .el-input__inner:focus {
                                    border-color: #C0C4CC !important;
                                    outline: 0;
                                }
                            }
                            .datapicker{
                                width: 400px;
                                ::v-deep .el-input__inner:focus {
                                    border-color: #C0C4CC !important;
                                    outline: 0;
                                }
                            }
                            .storeid,.building{
                                width: 400px;
                                    ::v-deep .el-input__inner {
                                        border-color: #C0C4CC !important;
                                    }
                            }
                            
                        }
                    }
                }
            }
            // 添加社区底部按钮
            .contentfooter{
                width: 100%;
                box-sizing: border-box;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                .savebutton,.reseatebutton{
                    width: 140px;
                    height: 40px;
                    margin-right: 50px;
                    i{
                        margin-right: 5px;
                    }
                }
                .createbutton{
                    width: 160px;
                    height: 40px;
                    i{
                        margin-right: 5px;
                    }
                }
                .el-button--primary{
                    background-color: rgba(0, 121, 254, 1);
                }
                .el-button--primary:hover {
                    background: #3394fe !important;
                    border-color: #3394fe !important;
                    color: #FFF !important;
                }
                .el-button.is-plain{
                    border-color: rgba(0, 121, 254, 1);
                    color: rgba(0, 121, 254, 1);
                }
                .el-button.is-plain:hover {
                    background: #FFF !important;
                    border-color: #409EFF;
                    color: #409EFF !important;
                }
            }
        }
    }
</style>